<template>
  <!-- 窗口内容 -->
  <a-modal
    :open="props.modelVisible"
    title="新增产线"
    ok-text="确认"
    cancel-text="取消"
    :maskClosable="true"
    @ok="onOk"
    @cancel="onCancel"
  >
    <!-- 表单内容 -->
    <a-form
      ref="formRef"
      :model="formState"
      :label-col="{ style: { width: '90px' } }"
      AutoComplete="off"
    >
      <a-form-item name="lineName" label="产线名称" :rules="[{ required: true }]">
        <a-input v-model:value="formState.lineName" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { message } from 'ant-design-vue';
import type { UnwrapRef } from 'vue';
import { useStore } from 'vuex';
import LineDao from '@/daos/line_dao';
import dayjs from 'dayjs';
const store = useStore();
const lineDao = new LineDao();
//项目ID获取
const projectId = store.getters.projectId;
//接口定义
interface FormState {
  lineName: string; //产线名称
}

//modelVisible用于开关窗口，默认关闭
const props = defineProps({
  modelVisible: {
    type: Boolean,
    default: false
  }
});
//emit用于修改窗口状态
const emit = defineEmits(['update:modelVisible', 'confirm']);

//定义表单
const formRef = ref();

//初始表单内容全为undefined
const formState: UnwrapRef<FormState> = reactive({
  lineName: ''
});
const onOk = () => {
  formRef.value
    .validate()
    .then(async () => {
      //请求后端
      lineDao
        .addLine(formState.lineName, projectId, dayjs())
        .then((result) => {
          message.success(result.data.data);
          emit('confirm');

          emit('update:modelVisible', false);
          formRef.value.resetFields();
        })
        .catch((error) => {
          console.error('创建产线失败 addLine', error);
        });
    })
    .catch((info) => {
      console.log('Validate Failed:', info);
    });
};
const onCancel = () => {
  emit('update:modelVisible', false);
  formRef.value.resetFields();
};
</script>
<style scoped></style>
